<template>
  <el-dialog :destroy-on-close="true" :lock-scroll="false" title="编辑任务" :visible.sync="visible" width="650px">

    <el-form ref="form" :model="form" :rules="rules" label-width="auto">
      <el-form-item label="项目名称：" prop="project_id">
        <ProjectSelect :disabled="true" :custom-options="projectOptions" v-model="form.project_id"/>
      </el-form-item>
<!--      <el-form-item label="任务名称：" prop="name">-->
<!--        <el-input v-model="form.name" placeholder="名称最多不超过50个字符"/>-->
<!--      </el-form-item>-->
      <el-form-item label="任务名称：" prop="type">
        <el-select v-model="form.type" placeholder="请选择任务名称" style="width: 100%">
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.label">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="负责人：" prop="user_ids">
        <PrincipalSelect placeholder="请搜索任务负责人" ref="principalSelectRef" v-model="form.user_ids" :limit="true"
                         :custom-options="principalOptions"/>
      </el-form-item>
      <!--      <el-form-item label="任务比重：" prop="percent">-->
      <!--        <el-input-number :min="0" v-model="form.percent" :max="this.temp1+this.temp" placeholder="请输入任务比重"-->
      <!--                         style="width: 50%"/>-->
      <!--        %-->
      <!--        <span style="margin-left: 30px">剩余量：{{ form.percent_residue }}%</span>-->
      <!--      </el-form-item>-->

      <el-form-item label="计划设备数量" prop="plan_product_quantity">
        <el-input-number :min="0" :max="100" placeholder="请输入计划设备数量" v-model="form.plan_product_quantity"/>
      </el-form-item>

      <el-form-item label="任务状态：" prop="status">
        <el-select v-model="form.status" placeholder="请选择任务状态" style="width: 50%">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="计划开始时间：" prop="plan_start_at">
        <el-date-picker
          style="width: 50%"
          :picker-options="{disabledDate:(time)=>{
                  if(form.plan_complete_at){
                    return Date.parse(form.plan_complete_at)<Date.parse(time)
                  }
                }}"
          v-model="form.plan_start_at"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="计划结束时间：" prop="plan_complete_at">
        <el-date-picker
          style="width: 50%"
          :picker-options="{disabledDate:(time)=>{
                  if(form.plan_start_at){
                    return Date.parse(form.plan_start_at)>time.getTime()
                  }
                }}"
          v-model="form.plan_complete_at"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="描述说明：">
        <el-input v-model="form.description" placeholder="描述任务名称" type="textarea" :rows="4" show-word-limit
                  maxlength="1000"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="onCancel()">取消</el-button>
      <el-button :loading="loading" type="primary" @click="onSave('form')">保存</el-button>
    </div>

  </el-dialog>


</template>

<script>
import ProjectSelect from "@/views/project/task/components/ProjectSelect.vue";
import PrincipalSelect from "@/views/project/task/components/PrincipalSelect.vue";


export default {
  name: "editTask",
  components: {ProjectSelect, PrincipalSelect},
  props: ["typeList", "statusList"],
  data() {
    return {
      temp1: null,
      temp: null,
      visible: false,
      loading: false,
      rules: {
        name: [{required: true, message: '任务名称必需', trigger: 'change'}],
        type: [{required: true, message: '任务类型为必需', trigger: 'change'}],
        project_id: [{required: true, message: '项目编号为必需', trigger: 'change'}],
        user_ids: [{required: true, message: '负责人为必需', trigger: 'change'}],
        percent: [{required: true, message: '任务比重为必需', trigger: 'change'}],
        status: [{required: true, message: '任务状态为必需', trigger: 'change'}],
        plan_start_at: [{required: true, message: '计划开始日期为必需', trigger: 'change'}],
        plan_complete_at: [{required: true, message: '计划结束日期为必需', trigger: 'change'}],
        description: [{required: true, message: '描述说明为必需', trigger: 'change'}],
        plan_product_quantity:[{required: true, message: '任务比重为必需', trigger: 'blur'}]
      },
      form: {
        name: null,
        type: null,
        project_id: null,
        user_ids: [],
        percent: null,
        status: null,
        plan_start_at: null,
        plan_complete_at: null,
        plan_product_quantity:null,
        description: null,
      },
      options: [],
      projectOptions: [],
      principalOptions: [],
    }
  },
  watch: {
    "form.percent": {
      handler(val) {
        //tmp1:oldPercent      temp:oldPercent_residue    val :new percent
        this.form.percent_residue = this.temp1 - val > 0 ? this.temp + (this.temp1 - val) : this.temp + (this.temp1 - val)
      },
      deep: true
    }
  },
  methods: {
    onProjectSelect(val) {
      this.form.margin = val
      this.$forceUpdate()
    },

    onCancel() {
      this.loading = false
      this.visible = false
    },

    onSave() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.handleSave()
        }
      })
    },

    onActivate(row) {
      this.visible = true;
      this.$nextTick(() => {
        this.form = JSON.parse(JSON.stringify(row))
        this.principalOptions = this.form.users.map((item) => ({id: item.id, realname: item.name}));
        this.projectOptions = [{id: row.project_id, name: row.project_name, percent_residue: row.percent_residue}]
        this.form.percent_residue = row.percent_residue
        this.form.plan_product_quantity = row.plan_product_quantity
        this.temp = row.percent_residue
        this.temp1 = row.percent
        this.$set(this.form, 'user_ids', this.form.users.map((item) => item.id))
      })
    },

    async handleSave() {
      this.loading = true
      const {
        name,
        project_id,
        description,
        type,
        plan_start_at,
        plan_complete_at,
        plan_product_quantity,
        // percent,
        status,
        user_ids
      } = this.form
      const res = (await this.$http.put(`/tasks/${this.form.id}`, {
        name,
        project_id,
        description,
        type,
        plan_start_at,
        plan_complete_at,
        plan_product_quantity,
        // percent,
        status,
        user_ids
      })).data
      res.success ? this.$message.success(res.msg) : this.$message.error(res.msg)
      this.onCancel();
      this.$emit("reload");
    }
  }
}
</script>

<style scoped>

</style>
